<script setup>
import { ref } from "vue";
import { useUserStore } from "@/stores/user";
import { useRouter } from "vue-router";
const userStore = useUserStore();
const formModel = ref({
  name: "",
  password: "",
  agree: false,
});
const rules = ref({
  name: [
    { required: true, message: "请输入账户", trigger: "blur" },
    { min: 3, max: 20, message: "账户长度在 3 到 20 个字符", trigger: "blur" },
  ],
  password: [
    { required: true, message: "请输入密码", trigger: "blur" },
    { min: 6, max: 16, message: "密码长度在 6 到 16 个字符", trigger: "blur" },
  ],
  agree: [
    {
      validator: (rule, value, callback) => {
        if (value) {
          callback();
        } else {
          callback(new Error("请同意隐私条款和服务条款"));
        }
      },
    },
  ],
});
const formRef = ref(null);
const router = useRouter();
//提交表单
const submit = () => {
  //再次验证表单
  formRef.value.validate(async (valid) => {
    if (valid) {
      //调用store里的接口，并将数据存储到store里
      await userStore.useUserInfo(formModel.value.name, formModel.value.password);
      // const res = await getLoginApi(formModel.value.name, formModel.value.password);
      // console.log(res);
      ElMessage.success("登陆成功");
      router.replace("/");
    }
  });
};
</script>
<template>
  <div class="login">
    <div class="header container">
      <h1><a href="#">xiaotuxian</a></h1>
      <span><a @click="$router.push('/')">加入网站首页 >></a></span>
    </div>
    <div class="mid">
      <div class="float">
        <div class="nav">账户登陆</div>
        <el-form class="form" :model="formModel" ref="formRef" :rules="rules">
          <el-form-item label="账户" prop="name">
            <el-input placeholder="请输入账户" v-model="formModel.name"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input
              type="password"
              placeholder="请输入密码"
              v-model="formModel.password"
            ></el-input>
          </el-form-item>
          <el-form-item prop="agree" class="tytk">
            <el-checkbox
              label="我已同意隐私条款和服务条款"
              name="agree"
              v-model="formModel.agree"
            />
          </el-form-item>
          <el-form-item class="dl">
            <el-button type="primary" @click="submit">点击登陆</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="pizhu">
      <ul>
        <li><a href="">关于我们</a></li>
        <li><a href="">关于我们</a></li>
        <li><a href="">关于我们</a></li>
        <li><a href="">关于</a></li>
        <li><a href="">关于我们</a></li>
        <li><a href="">关于我们</a></li>
        <li><a href="">关于我们eeee</a></li>
        <li><a href="">关于我们</a></li>
      </ul>
      <p>Xtx@2021</p>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.login {
  .header {
    height: 130px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    h1 {
      width: 200px;
      margin-right: 900px;
      a {
        display: block;
        height: 132px;
        width: 100%;
        text-indent: -9999px;
        background: url("@/assets/images/logo.png") no-repeat center 18px / contain;
      }
    }
    span {
      font-size: 14px;
    }
  }
  .mid {
    height: 440px;
    width: 100%;
    background: url("@/assets/images/login-bg.png") no-repeat center 18px / contain;
    position: relative;
    .float {
      width: 380px;
      height: 300px;
      background-color: #fff;
      position: absolute;
      left: 60%;
      top: 54px;
      .nav {
        font-size: 20px;
        font-weight: bold;
        padding: 20px 140px;
        margin: 0;
        border-bottom: 1px solid #e5e5e5;
      }
      .form {
        padding: 20px 20px;
        .tytk {
          margin-top: 15px;
        }
        .dl {
          text-align: center;
          margin: 0 20px;
          .el-button {
            width: 300px;
            height: 40px;
          }
        }
      }
    }
  }
  .pizhu {
    height: 300px;
    ul {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 20px;
      li {
        a {
          font-size: 14px;
          color: #666;
          border-right: 1px solid #666;
          padding: 0 10px;
        }
        &:last-child {
          a {
            border-right: none;
          }
        }
      }
    }
    p {
      margin-top: 20px;
      text-align: center;
    }
  }
}
</style>
